<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2022/10/11
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
   <div id="app">
       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="userId"
                   label="编号"
                   width="50">
           </el-table-column>
           <el-table-column
                   prop="username"
                   label="账号"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="realname"
                   label="真实姓名">
           </el-table-column>
           <el-table-column
                   prop="headUrl"
                   label="头像">
               <template slot-scope="scope">
                    <img :src="scope.row.headUrl" width="80" height="80">
               </template>
           </el-table-column>
           <el-table-column label="操作">
               <template slot-scope="scope">
                   <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                   <el-button type="text" size="small" @click="showRoleDialog(scope.row.userId)">分配角色</el-button>
               </template>
           </el-table-column>
       </el-table>
        <%--为用户分配角色--%>
       <el-dialog
               title="分配角色"
               :visible.sync="dialogVisible01"
               width="30%"
               :before-close="handleClose">
           <el-checkbox-group v-model="checkRole">
               <el-checkbox v-for="role in roles" :label="role.roleId+''" :key="role.roleId+''">{{role.roleName}}</el-checkbox>
           </el-checkbox-group>
           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
       </el-dialog>
   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
               tableData:[],
               currentPage:1,
               pageSize:5,
               total:0,
               userVo:{},
              //选中的id值
              checkRole:[],
              //所有的角色
              roles:[

              ],
              dialogVisible01:false,
              //用户id
              userId:0,

          },
          created(){
             this.initTable();
          },
          methods:{
              //确认分配角色
              qr(){
                  axios.post("/role/qr?userId="+this.userId+"&roleIds="+this.checkRole,).then(resp=>{
                       this.$message.success("分配成功");
                      this.dialogVisible01=false;
                  })
              },

              showRoleDialog(userId){
                  this.userId=userId;
                 this.dialogVisible01=true;
                  //1. 查询所有的角色
                  //2.当前用户具有的角色id
                  axios.get("/role/list?userId="+userId).then(resp=>{
                      this.roles=resp.data.data.list;
                      this.checkRole=resp.data.data.roleIds;
                  })
              },

               initTable(){
                   axios.post("/user/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.userVo).then(resp=>{
                         this.tableData=resp.data.data.list;
                         this.total=resp.data.data.total;
                   });
               }
          }
     })
</script>
</html>
